<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			main {
				padding: 10px;
				width: 500px;
				margin: 0 auto;
				background: #428CCF;
				color: white;
			}
			
			h2 {
				background: #0E5697;
				color: white;
			}
			
			img {
				width: 200px;
				height: 200px;
			}
			
			.tipt {
				border: solid 1px red;
			}
		</style>
	</head>

	<body>
		<main>
			<select id="city">
				<option selected="selected">郑州</option>
				<option>安阳</option>
				<option>新乡</option>
				<option>许昌</option>
				<option>平顶山</option>
				<option>信阳</option>
				<option>南阳</option>
				<option>开封</option>
				<option>洛阳</option>
				<option>商丘</option>
				<option>焦作</option>
				<option>鹤壁</option>
				<option>濮阳</option>
				<option>周口</option>
				<option>漯河</option>
				<option>驻马店</option>
				<option>三门峡</option>
				<option>济源</option>
			</select>
			<div id="main"></div>
		</main>
	</body>
	<script src="js/jquery-3.1.1.js"></script>
	<script src="js/template.js" type="text/javascript" charset="utf-8"></script>
	<script id="weatherid" type="text/html">
		<h2>{{index}}</h2>
		<div>
			<h2>{{currentCity}}</h2>
			{{each weather_data as ow}}
			<img src="{{dayPictureUrl}}" alt="">
			<p>{{ow.date}}</p>
			<p>{{ow.weather}}</p>
			<p>{{ow.temperature}}</p>
			<div class="tipt">
				{{each index as ind}}
				<p>{{ind.title}}</p>
				<p>{{ind.tipt}}</p>
				<p>{{ind.zs}}</p>
				<p>{{ind.des}}</p>
				{{/each}}
			</div>
 		{{/each}}
		</div>
	</script>
	<script>
		$('#city').click(function() {
			get();
		})
		function get() {
			$.getJSON({
				url: 'http://api.map.baidu.com/telematics/v3/weather?callback=?',
				data: {
					location: $('#city').val(),
					output: 'json',
					ak: 'QSvktjUUa3PE5lIASNlNae6uqzMbK5oG'
				},
				success: function(data) {
					var oweather = data.results[0].weather_data[0];
					var html = template('weatherid', data.results[0])
					console.log(data.results[0]);
					$('#main').html(html);
					console.log(html)
				}
			})
		}
		get();
	</script>

</html>